<template>
  <div class="main-container">
    <div class="operation-left">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>工艺路线管理</el-breadcrumb-item>
          <el-breadcrumb-item>生产通知</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 生产通知卡片列表 -->
      <div class="notice-box">
        <template v-for="notice in noticeList">
          <div class="notice-item" :key="notice.noticeNumber">
            <div class="total">
              <div :id="'cardC2' + notice.noticeNumber" class="total_title" @click="showNoticeDetail(notice)">
                <el-progress type="circle" :percentage="notice.percent" color="#1989fa" class="mt20" width="75"></el-progress>
                <p class="text">{{ notice.noticeNumber }}</p>
                <p class="text">{{ notice.orderUnit }}</p>
                <p class="text">{{ notice.workingNumber }}</p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>

    <div  v-if="!isEmpty(noticeInfo)">
      <!-- 通知单基础信息 -->
      <el-row class="mb10">
        <label>基础信息</label>
        <div class="ml10 inline-label mr10 fontSize12">{{ noticeInfo.noticeNumber || '通知单号' }}</div>
        <div class="inline-label mr10 fontSize12">{{ noticeInfo.orderUnit || '订货单位' }}</div>
        <div class="inline-label mr10 fontSize12">{{ noticeInfo.workingNumber || '产品工号' }}</div>
        <div class="inline-label mr10 fontSize12">{{ noticeInfo.remark || '备注' }}</div>
      </el-row>
      <!-- 通知单产品信息 -->
      <el-table border stripe :data="noticeDetail" row-key="id" @row-dblclick="showProcessDetail">
        <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
        <el-table-column prop="drawingNumber" label="图号" align="center" width="150"></el-table-column>
        <el-table-column prop="productName" label="品名" align="center" width="150"></el-table-column>
        <el-table-column prop="materialQuality" label="材质" align="center" width="150"></el-table-column>
        <el-table-column prop="number" label="数量" align="center" width="100"></el-table-column>
        <el-table-column prop="deliveryDate" label="交货日期" sortable align="center" width="150"></el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="180"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center" min-width="100"></el-table-column>
        <el-table-column prop="state" label="操作" align="left" fixed="right" width="125" v-if="$checkAuth('工艺路线投产提交')">
          <template slot-scope="scope">
            <el-button :id="bindRowId(scope.row)" size="mini" type="primary" @click="onClickDesign(scope.row, '产品通知')" :disabled="!canDesignState.includes(scope.row.state)"
              >投产工艺设计</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'

import _ from 'lodash'

const vuexProcess = namespace('TwoProcess')
const vuexNotice = namespace('NewNotice')
const vuexEnter = namespace('TwoEnter')

@Component({
  components: {
    Layout
  }
})
export default class Index extends Vue {
  // 获取已审批未完工的通知单
  @vuexEnter.Action GET_PROCESS_NOTICE: any
  @vuexEnter.State noticeList: any

  // 点击【设计】按钮对应的产品信息
  @vuexProcess.State productOnDesignVersion: any
  @vuexProcess.Mutation SET_PRODUCT_ON_DESIGN_VERSION: any

  @vuexNotice.Action GET_NOTICE_DETAIL: any
  @vuexNotice.State productList: any

  thisNoticeId: any = ''
  s1: string = 's1'

  /**
   * 生命周期函数
   * 查询生产通知列表
   */
  created() {
    this.GET_PROCESS_NOTICE()
  }

  // 生产通知卡片信息
  noticeInfo: any = {
    noticeNumber: '通知单号',
    orderUnit: '订货单位',
    workingNumber: '产品工号',
    remark: '备注'
  }

  // 生产通知详情（产品列表）
  noticeDetail: any[] = []

  // 可以变更设计的产品状态
  canDesignState: any[] = ['工艺设计', '待派工', '生产中', '工艺变更设计']

  /**
   * 判断通知单列表是否为空
   */
  isEmpty(obj) {
    return _.isEmpty(obj)
  }

  bindRowId(row: any) {
    console.log('绑定产品行设计按钮的ID')
    console.log(row.drawingNumber)
    console.log('绑定的ID：')
    let btnId = 'btnC2' + this.noticeInfo.noticeNumber + '-' + row.drawingNumber
    console.log(btnId)
    return btnId
  }

  /**
   * 通知单产品详情展示
   */
  showNoticeDetail(data) {
    this.$set(this.noticeInfo, 'noticeNumber', data.noticeNumber)
    this.$set(this.noticeInfo, 'orderUnit', data.orderUnit)
    this.$set(this.noticeInfo, 'workingNumber', data.workingNumber)
    this.$set(this.noticeInfo, 'remark', data.remark)
    this.getProductList(data.noticeId)
    this.thisNoticeId = data.noticeId
  }
  async getProductList(noticeId) {
    let result = await this.GET_NOTICE_DETAIL({ noticeId: noticeId })
    if (result) {
      this.noticeDetail = this.productList
      this.s1 = 's' // TODO 没搞明白这个样式绑定
    }
  }

  // 设计工艺表
  onClickDesign(product, type: any) {
    let tempProduct = {
      producingId: product.producingId,
      drawingNumber: product.drawingNumber,
      productName: product.productName,
      materialQuality: product.materialQuality,
      number: product.number,
      remark: product.remark
    }
    console.log(tempProduct.remark)

    this.$store.commit('TwoProcess/SET_PRODUCT_ON_DESIGN_VERSION', tempProduct)
    console.log('设计工艺表绑定对应产品')
    console.log(this.productOnDesignVersion)

    this.$router.push({ name: 'design', params: { type } })
  }

  /**
   * 双击查看设计详情
   */
  showProcessDetail(row) {
    this.onClickDesign(row, '双击查看详情')
  }
}
</script>

<style lang="scss" scoped>
.total {
  float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
      color: #000;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.s1 {
  display: none;
}
.s2 {
  height: 100px;
  display: none;
}

//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.notice-item {
  height: 270px;
}
.breadcrumb {
  margin: 10px 0 15px 5px;
  width: 100%;
  border: none;
}

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}

.layout .operation {
  overflow-x: auto;
}
.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>